// Initialize particles.js
function login() {
    particlesJS('particles-js', {
        "particles": {
            "number": {
                "value": 60,
                "density": {
                    "enable": true,
                    "value_area": 800
                }
            },
            "color": {
                "value": "#00f7ff"
            },
            "shape": {
                "type": "circle",
                "stroke": {
                    "width": 0,
                    "color": "#000000"
                }
            },
            "opacity": {
                "value": 0.5,
                "random": true,
                "anim": {
                    "enable": true,
                    "speed": 1,
                    "opacity_min": 0.1,
                    "sync": false
                }
            },
            "size": {
                "value": 3,
                "random": true,
                "anim": {
                    "enable": true,
                    "speed": 2,
                    "size_min": 0.1,
                    "sync": false
                }
            },
            "line_linked": {
                "enable": true,
                "distance": 150,
                "color": "#00f7ff",
                "opacity": 0.4,
                "width": 1
            },
            "move": {
                "enable": true,
                "speed": 2,
                "direction": "none",
                "random": true,
                "straight": false,
                "out_mode": "out",
                "bounce": false
            }
        },
        "interactivity": {
            "detect_on": "canvas",
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "grab"
                },
                "resize": true
            },
            "modes": {
                "grab": {
                    "distance": 140,
                    "line_linked": {
                        "opacity": 1
                    }
                }
            }
        },
        "retina_detect": true
    });
}
login()

// 监听登录表单的提交事件
document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为，改用AJAX处理[1,8](@ref)

    // 获取表单输入值
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const errorMessage = document.getElementById('errorMessage'); // 错误提示元素
    const loader = document.getElementById('loader'); // 加载动画元素

    // 清空错误信息并显示加载动画
    errorMessage.textContent = '';
    loader.style.display = 'block';

    // 使用Fetch API发送登录请求[9](@ref)
    fetch('/api/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json', // 声明请求体为JSON格式
        },
        body: JSON.stringify({ // 序列化表单数据
            username: username,
            password: password
        }),
        credentials: 'include' // 包含cookie等认证信息（用于会话保持）
    })
    .then(response => response.json()) // 解析响应为JSON格式
    .then(data => {
        loader.style.display = 'none'; // 隐藏加载动画

        // 登录成功处理
        if (data.message === '登录成功') {
            /*
             * 启动本地UDP客户端（需配合本地守护进程）
             * 用于实现实时通知功能，失败时静默处理不提示用户[2](@ref)
             */
            if (data.user && data.user.id && data.user.username) {
                fetch('http://127.0.0.1:50001/start_client', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        user_id: data.user.id, // 用户唯一标识
                        username: data.user.username, // 用户名
                        server_host: '你的云服务器IP', // UDP服务器地址（需替换实际值）
                        server_port: 9999 // UDP服务器端口
                    })
                }).catch(function(err) {
                    // 本地守护进程未安装时的静默处理（不影响主流程）
                    console.log('UDP客户端未启动:', err);
                });
            }

            // 跳转到指定页面（优先使用服务端返回的redirect路径）
            window.location.href = data.redirect || '/search';
        } else {
            // 显示服务端返回的错误信息（如"用户名或密码错误"）
            errorMessage.textContent = data.message;
        }
    })
    .catch(error => {
        // 网络请求失败处理
        loader.style.display = 'none';
        errorMessage.textContent = '登录失败，请稍后再试';
        console.error('登录请求异常:', error); // 开发环境日志
    });
});